import type { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';

export class CustomCellRenderer implements ICellRendererComp {
    eGui: any;

    init(params: ICellRendererParams) {
        this.eGui = document.createElement('div');
        this.eGui.classList.add('my-custom-cell-renderer');

        // creates the row dragger element
        const rowDragger = document.createElement('i');
        rowDragger.classList.add('fas', 'fa-arrows-alt-v');
        this.eGui.appendChild(rowDragger);

        // registers as a row dragger
        params.registerRowDragger(rowDragger, 0);

        this.refresh(params);
    }

    getGui() {
        return this.eGui;
    }

    refresh(params: ICellRendererParams): boolean {
        const age = params.data?.age ? `(${params.data.age})` : '';
        this.eGui.innerHTML = /* html */ `
            <div  class="athlete-info">
                <span>${params.data?.firstName ?? ''} </span>
                <span>${params.data?.lastName ?? ''}</span>
            </div>
            <span>${age}</span>
        `;

        return false;
    }
}
